<!-- 引入富文本的js和css -->
<script src="__ADDON__/store/js/editor.js"></script>
<link href="__ADDON__/store/css/editor.css" rel="stylesheet">
<script src="__ADDON__/store/component/editor.js"></script>
<div id="app">
    <template>
        <el-row :gutter="20">
            <el-col :span="3"><el-button type="primary" @click="add">创建活动</el-button></el-col>
            <el-col :span="21" style="text-align: right">
                <el-form :inline="true" label-width="80px">
                    <el-select v-model="mold" placeholder="请选择类型" @change="ChangePage(1)">
                        <el-option label="选择类型" value=""></el-option>
                        <el-option label="图片投票" value="1"></el-option>
                        <el-option label="视频投票" value="2"></el-option>
                        <el-option label="文字投票" value="3"></el-option>
                        <el-option label="二选一投票" value="4"></el-option>
                    </el-select>
                    <el-select v-model="check" placeholder="请选择审核状态" @change="ChangePage(1)">
                        <el-option label="选择审核状态" value=""></el-option>
                        <el-option label="待审核" value="0"></el-option>
                        <el-option label="通过" value="1"></el-option>
                        <el-option label="驳回" value="2"></el-option>
                    </el-select>
                    <el-select v-model="status" placeholder="请选择活动状态" @change="ChangePage(1)">
                        <el-option label="选择活动状态" value=""></el-option>
                        <el-option label="进行中" value="10"></el-option>
                        <el-option label="暂停" value="20"></el-option>
                    </el-select>
                    <el-input placeholder="请输入活动名称" v-model="name" style="width: 300px;">
                        <el-button slot="append" icon="el-icon-search" @click="ChangePage(1)"></el-button>
                    </el-input>
                </el-form>
            </el-col>
        </el-row>

        <el-table
                :data="list"
                border
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    prop="mold"
                    label="所属类型" align="center">
                <template slot-scope="scope">
                    <div>ID：{{scope.row.id}}</div>
                    {{ scope.row.mold == 1 ? '图片投票' : '' }}
                    {{ scope.row.mold == 2 ? '视频投票' : '' }}
                    {{ scope.row.mold == 3 ? '文字投票' : '' }}
                    {{ scope.row.mold == 4 ? '二选一投票' : '' }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="活动名称" align="center">
            </el-table-column>
            <el-table-column
                    prop="image"
                    label="预览图" align="center">
                <template slot-scope="scope">
                    <el-image
                            style="width: 80px; height: 80px"
                            :src="'{$cdn_url|htmlentities}' + scope.row.image"
                            :preview-src-list="['{$cdn_url|htmlentities}' + scope.row.image]"
                            fit="scale-down" v-if="scope.row.mold < 3"></el-image>
                    <el-image
                            style="width: 80px; height: 80px"
                            :src="scope.row.image"
                            :preview-src-list="[scope.row.image]"
                            fit="scale-down" v-else></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="start_time"
                    label="活动时间" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.start_time_text}}<br>
                    {{ scope.row.end_time_text}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="poster"
                    label="分享海报" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 80px; height: 80px"
                        :src="'{$cdn_url|htmlentities}' + scope.row.poster"
                        :preview-src-list="['{$cdn_url|htmlentities}' + scope.row.poster]"
                        fit="scale-down"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="poster_qr_pos"
                    label="海报二维码定位" align="center">
            </el-table-column>
            <el-table-column
                    prop="poster_qr_size"
                    label="海报二维码尺寸" align="center">
            </el-table-column>
            <el-table-column
                prop="person_poster"
                label="作品海报" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 80px; height: 80px"
                        :src="'{$cdn_url|htmlentities}' + scope.row.person_poster"
                        :preview-src-list="['{$cdn_url|htmlentities}' + scope.row.person_poster]"
                        fit="scale-down"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="person_qr_pos"
                    label="作品二维码定位" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_qr_size"
                    label="作品二维码尺寸" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_opus_pos"
                    label="参赛作品图定位" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_opus_size"
                    label="参赛作品图尺寸" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_name_pos"
                    label="作品名称定位" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_num_pos"
                    label="作品编号定位" align="center">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="总票数" align="center">
            </el-table-column>
            <el-table-column
                    prop="hit"
                    label="总浏览量" align="center">
            </el-table-column>
            <el-table-column
                    prop="person_count"
                    label="作品人数" align="center">
            </el-table-column>
            <el-table-column
                    prop="er_code"
                    label="小程序码" align="center">
                <template slot-scope="scope">
                    <el-image
                            style="width: 60px; height: 60px"
                            :src="scope.row.er_code"
                            :preview-src-list="[scope.row.er_code]"
                            fit="scale-down">
                        <div slot="error" class="image-btn">
                            <a style="line-height: 60px;color: #409EFF;cursor:pointer;" @click="qrcode(scope.row.id)">重新生成</a>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="check"
                    label="审核状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.check == '0'" style="color: #ccc">待审核</span>
                    <span v-else-if="scope.row.check == '1'" style="color: #409EFF">通过</span>
                    <span v-else  style="color: #f00">驳回</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="活动状态" align="center">
                <template slot-scope="scope">
                    <el-switch
                            :value="scope.row.status"
                            active-color="#409EFF"
                            active-value="10"
                            inactive-value="20" @change="setStatus(scope.row.id,scope.row.status == '10' ? '20' : '10')">
                    </el-switch>
                </template>
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="createtime"-->
<!--                    label="创建时间" align="center">-->
<!--            </el-table-column>-->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle size="small" @click="edit(scope.row)"></el-button>
                    <el-popconfirm title="是否确定删除？" @confirm='setStatus(scope.row.id,30)'>
                        <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="small"></el-button>
                    </el-popconfirm>
                    <el-dropdown style="margin-top: 5px">
                        <el-button type="primary" class="el-dropdown-link" size="mini" round>
                        更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="goto('/kzvote/person?vote_id='+scope.row.id)" v-if="scope.row.mold != 4">作品管理</el-dropdown-item>
                            <el-dropdown-item @click.native="goto('/kzvote/group?vote_id='+scope.row.id)" v-if="scope.row.group_status == 1">分组管理</el-dropdown-item>
                            <el-dropdown-item @click.native="goto('/kzvote/review?vote_id='+scope.row.id)">弹幕管理</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change='ChangePage'>
            </el-pagination>
        </div>

        <el-dialog
                title="活动作品"
                :visible.sync="dialog"
                :close-on-click-modal="false">

                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :inline="false" class="demo-form-inline">

                    <el-tabs v-model="activeName" :stretch="true">
                        <el-tab-pane label="基本设置" name="first">
                            <el-form-item label="类型" prop="mold">
                                <el-radio-group v-model="form.mold" :disabled="form.id>0?true:false">
                                    <el-radio label="1">图片投票</el-radio>
                                    <el-radio label="2">视频投票</el-radio>
                                    <el-radio label="4">二选一投票</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="投票模板" prop="temp_name" v-if="form.mold < 3">
                                <el-select v-model="form.temp_name" placeholder="请选择投票模板" style="width: 100%">
                                    {foreach name="temp" item="vo"}
                                    <el-option :label="'{$vo.name|htmlentities}'" :value="'{$vo.temp_name|htmlentities}'"></el-option>
                                    {/foreach}
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                            </el-form-item>
                            <el-form-item label="蓝方名称" prop="blue" v-if="form.mold == 4">
                                <el-input v-model="form.blue" placeholder="请输入蓝方名称"></el-input>
                            </el-form-item>
                            <el-form-item label="红方名称" prop="red" v-if="form.mold == 4">
                                <el-input v-model="form.red" placeholder="请输入红方名称"></el-input>
                            </el-form-item>
                            <el-form-item label="活动图片" prop="image" v-if="form.mold < 3">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/api/common/upload"
                                        :limit="1"
                                        :show-file-list="false"
                                        :on-success="function (res){return upload(res,'image')}">
                                    <img v-if="form.image" :src="'{$cdn_url|htmlentities}' + form.image" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="开始时间" prop="start_time">
                                <el-date-picker
                                        v-model="form.start_time"
                                        type="date" format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择开始时间" style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间" prop="end_time">
                                <el-date-picker
                                        v-model="form.end_time"
                                        type="date" format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择结束时间" style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="分享海报" prop="poster">
                                <el-upload
                                    class="avatar-uploader"
                                    action="/api/common/upload"
                                    :limit="1"
                                    :show-file-list="false"
                                    :on-success="function (res){return upload(res,'poster')}">
                                    <img v-if="form.poster" :src="'{$cdn_url|htmlentities}' + form.poster" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="海报二维码定位" prop="poster_qr_pos">
                                <el-input v-model="form.poster_qr_pos" placeholder="请输入海报二维码定位如“275,200”"></el-input>
                            </el-form-item>
                            <el-form-item label="海报二维码尺寸" prop="poster_qr_size">
                                <el-input v-model="form.poster_qr_size" placeholder="请输入海报二维码尺寸如135"></el-input>
                            </el-form-item>
                            <el-form-item label="作品海报" prop="person_poster">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/api/common/upload"
                                        :limit="1"
                                        :show-file-list="false"
                                        :on-success="function (res){return upload(res,'person_poster')}">
                                    <img v-if="form.person_poster" :src="'{$cdn_url|htmlentities}' + form.person_poster" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="作品二维码定位" prop="person_qr_pos">
                                <el-input v-model="form.person_qr_pos" placeholder="请输入作品二维码定位如“275,200”"></el-input>
                            </el-form-item>
                            <el-form-item label="作品二维码尺寸" prop="person_qr_size">
                                <el-input v-model="form.person_qr_size" placeholder="请输入作品二维码尺寸如135"></el-input>
                            </el-form-item>
                            <el-form-item label="参赛作品图定位" prop="person_opus_pos">
                                <el-input v-model="form.person_opus_pos" placeholder="请输入参赛作品图定位如“275,200”"></el-input>
                            </el-form-item>
                            <el-form-item label="参赛作品图尺寸" prop="person_opus_size">
                                <el-input v-model="form.person_opus_size" placeholder="请输入参赛作品图尺寸如135"></el-input>
                            </el-form-item>
                            <el-form-item label="作品名称定位" prop="person_name_pos">
                                <el-input v-model="form.person_name_pos" placeholder="请输入作品名称定位如“275,200”"></el-input>
                            </el-form-item>
                            <el-form-item label="作品编号定位" prop="person_num_pos">
                                <el-input v-model="form.person_num_pos" placeholder="请输入作品编号定位如“275,200”"></el-input>
                            </el-form-item>
                            <el-form-item label="活动详情" prop="desc">
                                <editor :text="form.desc" @set-html="html" v-if="dialog"></editor>
                            </el-form-item>
                        </el-tab-pane>

                        <el-tab-pane label="高级设置" name="second">
                            <el-form-item label="参与按钮名称" prop="btn_txt" v-if="form.mold < 3">
                                <el-input v-model="form.btn_txt" placeholder="参与按钮名称"></el-input>
                            </el-form-item>
                            <el-form-item label="投票总次数" prop="limit_count">
                                <el-input v-model="form.limit_count" placeholder="0为不限制"></el-input>
                            </el-form-item>
                            <el-form-item label="每日投票次数" prop="day_limit_count">
                                <el-input v-model="form.day_limit_count" placeholder="0为不限制"></el-input>
                            </el-form-item>
                            <el-form-item label="可重复投票" prop="day_limit_status">
                                <el-switch
                                        v-model="form.day_limit_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="投票验证码" prop="verify_status">
                                <el-switch
                                        v-model="form.verify_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="礼物开关" prop="gift_status" v-if="form.mold < 3">
                                <el-switch
                                        v-model="form.gift_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <div v-if="form.mold < 3">
                                <el-form-item label="报名开关" prop="apply_status">
                                    <el-switch
                                            v-model="form.apply_status"
                                            active-color="#409EFF"
                                            active-value="1"
                                            inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                                <div v-if="form.apply_status == 1">
                                <el-form-item label="报名是否审核" prop="apply_check">
                                    <el-switch
                                            v-model="form.apply_check"
                                            active-color="#409EFF"
                                            active-value="1"
                                            inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="结束前均可报名" prop="end_apply_status">
                                    <el-switch
                                            v-model="form.end_apply_status"
                                            active-color="#409EFF"
                                            active-value="1"
                                            inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                                <div v-if="form.end_apply_status == 0">
                                    <el-form-item label="报名开始时间" prop="apply_start_time">
                                        <el-date-picker
                                                v-model="form.apply_start_time"
                                                type="date" format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择报名开始时间" style="width: 100%">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="报名结束时间" prop="apply_end_time">
                                        <el-date-picker
                                                v-model="form.apply_end_time"
                                                type="date" format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择报名结束时间" style="width: 100%">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>
                                <el-form-item label="报名选项" prop="option">
                                    <el-select v-model="form.option" placeholder="请选择报名选项" multiple style="width: 100%">
                                        {foreach name="option" item="vo"}
                                        <el-option :label="'{$vo|htmlentities}'" :value="'{$vo|htmlentities}'"></el-option>
                                        {/foreach}
                                    </el-select>
                                </el-form-item>
                            </div>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="活动详情" name="third">
                            <el-form-item label="主办方姓名" prop="sponsor_name" v-if="form.mold < 3">
                                <el-input v-model="form.sponsor_name" placeholder="主办方姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="主办方电话" prop="sponsor_mobile" v-if="form.mold < 3">
                                <el-input v-model="form.sponsor_mobile" placeholder="主办方电话"></el-input>
                            </el-form-item>
                            <el-form-item label="背景音乐" prop="music_id">
                                <el-select v-model="form.music_id" placeholder="请选择背景音乐" clearable style="width: 100%">
                                    {foreach name="music" item="vo"}
                                    <el-option :label="'{$vo.name|htmlentities}'" :value="'{$vo.id|htmlentities}'"></el-option>
                                    {/foreach}
                                </el-select>
                            </el-form-item>
                            <el-form-item label="作品分组" prop="group_status" v-if="form.mold < 3">
                                <el-switch
                                        v-model="form.group_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="弹幕开关" prop="review_status">
                                <el-switch
                                        v-model="form.review_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="是否公开活动" prop="is_open">
                                <el-switch
                                        v-model="form.is_open"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="仅自己可分享" prop="share_status">
                                <el-switch
                                        v-model="form.share_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
<!--                            <el-form-item label="状态" prop="status">-->
<!--                                <el-switch-->
<!--                                        v-model="form.status"-->
<!--                                        active-color="#409EFF"-->
<!--                                        active-value="10"-->
<!--                                        inactive-value="20">-->
<!--                                </el-switch>-->
<!--                            </el-form-item>-->
                            <el-form-item label="加粉设置" prop="fans_status">
                                <el-switch
                                        v-model="form.fans_status"
                                        active-color="#409EFF"
                                        active-value="1"
                                        inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <div v-if="form.fans_status == 1">
                                <el-form-item label="类型" prop="fans_desc.type">
                                    <el-radio-group v-model="form.fans_desc.type">
                                        <el-radio label="1">公众号</el-radio>
                                        <el-radio label="2">微信号</el-radio>
                                        <el-radio label="3">微信群</el-radio>
                                        <el-radio label="4">小程序</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="名称" prop="fans_desc.name">
                                    <el-input v-model="form.fans_desc.name"></el-input>
                                </el-form-item>
                                <el-form-item label="头像" prop="fans_desc.avatar">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/api/common/upload"
                                            :limit="1"
                                            :show-file-list="false"
                                            :on-success="function (res){return upload(res,'avatar')}">
                                        <img v-if="form.fans_desc.avatar" :src="'{$cdn_url|htmlentities}' + form.fans_desc.avatar" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="二维码" prop="fans_desc.qr" v-if="form.fans_desc.type < 4">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/api/common/upload"
                                            :limit="1"
                                            :show-file-list="false"
                                            :on-success="function (res){return upload(res,'qr')}">
                                        <img v-if="form.fans_desc.qr" :src="'{$cdn_url|htmlentities}' + form.fans_desc.qr" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <div v-else>
                                    <el-form-item label="小程序APPID" prop="fans_desc.appid">
                                        <el-input v-model="form.fans_desc.appid"></el-input>
                                    </el-form-item>
                                    <el-form-item label="小程序路径" prop="fans_desc.path">
                                        <el-input v-model="form.fans_desc.path"></el-input>
                                    </el-form-item>
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>

                    <div style="text-align: center">
                        <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                        <el-button @click="cancelForm">取 消</el-button>
                    </div>
                </el-form>
        </el-dialog>

    </template>
</div>

<script type="module">
    new Vue({
        el: '#app',
        data: function() {
            return {
                list: [],
                page: 1,
                total: 0,
                mold: "",
                check: "",
                status: "",
                name: '',
                dialog: false,
                loading: false,
                activeName: 'first',
                form: {
                    id: 0,
                    mold: '1',
                    temp_name: '',
                    music_id: '',
                    name: '',
                    blue: '',
                    red: '',
                    image: '',
                    start_time: moment.unix((new Date().getTime()/1000)).format('YYYY-MM-DD HH:mm:ss'),
                    end_time: moment.unix((new Date().getTime()/1000 + 86400 * 7)).format('YYYY-MM-DD HH:mm:ss'),
                    poster: '',
                    poster_qr_pos: '',
                    poster_qr_size: '',
                    person_poster: '',
                    person_qr_pos: '',
                    person_qr_size: '',
                    person_opus_pos: '',
                    person_opus_size: '',
                    person_name_pos: '',
                    person_num_pos: '',
                    desc: '尊重投票规则，请不要违规哦~',

                    sponsor_name: '',
                    sponsor_mobile: '',
                    limit_count: 0,
                    day_limit_count: 1,
                    btn_txt: '投票',
                    day_limit_status: '1',
                    verify_status: '0',
                    gift_status: '1',
                    group_status: '0',
                    is_open: '1',
                    share_status: '0',
                    review_status: '1',
                    status: '10',
                    // join_form_status: '0',
                    // join_form: '',
                    apply_status: '0',
                    apply_check: '0',
                    end_apply_status: '1',
                    apply_start_time: moment.unix((new Date().getTime()/1000)).format('YYYY-MM-DD HH:mm:ss'),
                    apply_end_time: moment.unix((new Date().getTime()/1000 + 86400 * 7)).format('YYYY-MM-DD HH:mm:ss'),
                    option: '',
                    fans_status: '0',
                    fans_desc:{
                        type: '1',
                        name: '',
                        avatar: '',
                        qr: '',
                        appid: '',
                        path: '',
                    }
                },
                rules: {
                    temp_name: [
                        { required: true, message: '请选择投票模板', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    blue: [
                        { required: true, message: '请输入蓝方名称', trigger: 'blur' },
                    ],
                    red: [
                        { required: true, message: '请输入红方名称', trigger: 'blur' },
                    ],
                    image: [
                        { required: true, message: '请上传活动图片', trigger: 'change' }
                    ],
                    start_time: [
                        { required: true, message: '请选择活动开始时间', trigger: 'blur' }
                    ],
                    end_time: [
                        { required: true, message: '请选择活动结束时间', trigger: 'blur' }
                    ],
                    poster: [
                        { required: true, message: '请上传分享海报图片', trigger: 'change' }
                    ],
                    poster_qr_pos: [
                        { required: true, message: '请填写海报二维码定位', trigger: 'change' }
                    ],
                    poster_qr_size: [
                        { required: true, message: '请填写海报二维码尺寸', trigger: 'change' }
                    ],
                    person_poster: [
                        { required: true, message: '请上传作品海报图片', trigger: 'change' }
                    ],
                    person_qr_pos: [
                        { required: true, message: '请填写作品二维码定位', trigger: 'change' }
                    ],
                    person_qr_size: [
                        { required: true, message: '请填写作品二维码尺寸', trigger: 'change' }
                    ],
                    person_opus_pos: [
                        { required: true, message: '请填写参赛作品图定位', trigger: 'change' }
                    ],
                    person_opus_size: [
                        { required: true, message: '请填写参赛作品图尺寸', trigger: 'change' }
                    ],
                    person_name_pos: [
                        { required: true, message: '请填写作品名称定位', trigger: 'change' }
                    ],
                    person_num_pos: [
                        { required: true, message: '请填写作品编号定位', trigger: 'change' }
                    ],
                    limit_count: [
                        { required: true, message: '请输入用户投票总次数', trigger: 'blur' }
                    ],
                    day_limit_count: [
                        { required: true, message: '请输入每日投票次数', trigger: 'blur' }
                    ],
                }
            }
        },
        created(){
            this.ajax();
        },
        methods: {
            ajax(){
                let params = {}
                params.mold = this.mold
                params.check = this.check
                params.status = this.status
                params.name = this.name
                params.page = this.page
                get('',params).then(res => {
                    this.list = res.data.rows;
                    this.total = res.data.total;
                })
            },
            ChangePage(page){
                this.page=page
                this.ajax()
            },
            submit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        post('/addons/kzvote/vote/save', this.form).then(res => {
                            this.loading = false;
                            this.$message({
                                type: res.code === 1 ? 'success' : 'error',
                                message: res.msg
                            });
                            if (res.code === 1) {
                                this.dialog = false;
                                this.$nextTick(() => {
                                    if(this.$refs.ruleForm){
                                        this.$refs.ruleForm.resetFields();
                                    }
                                })
                                this.ajax()
                            }
                        }).catch(err => {
                            this.$message({
                                type: 'error',
                                message: err
                            });
                            this.loading = false;
                        })
                    }
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
            },
            add(){
                this.form.id = 0;
                this.activeName='first'
                this.dialog = true;
                this.form = {
                    id: 0,
                    mold: '1',
                    temp_name: '',
                    music_id: '',
                    name: '',
                    blue: '',
                    red: '',
                    image: '',
                    start_time: moment.unix((new Date().getTime()/1000)).format('YYYY-MM-DD HH:mm:ss'),
                    end_time: moment.unix((new Date().getTime()/1000 + 86400 * 7)).format('YYYY-MM-DD HH:mm:ss'),
                    poster: '',
                    poster_qr_pos: '',
                    poster_qr_size: '',
                    person_poster: '',
                    person_qr_pos: '',
                    person_qr_size: '',
                    person_opus_pos: '',
                    person_opus_size: '',
                    person_name_pos: '',
                    person_num_pos: '',
                    desc: '尊重投票规则，请不要违规哦~',

                    sponsor_name: '',
                    sponsor_mobile: '',
                    limit_count: 0,
                    day_limit_count: 1,
                    btn_txt: '投票',
                    day_limit_status: '1',
                    verify_status: '0',
                    gift_status: '1',
                    group_status: '0',
                    is_open: '1',
                    share_status: '0',
                    review_status: '1',
                    status: '10',
                    // join_form_status: '0',
                    // join_form: '',
                    apply_status: '0',
                    apply_check: '0',
                    end_apply_status: '1',
                    apply_start_time: moment.unix((new Date().getTime()/1000)).format('YYYY-MM-DD HH:mm:ss'),
                    apply_end_time: moment.unix((new Date().getTime()/1000 + 86400 * 7)).format('YYYY-MM-DD HH:mm:ss'),
                    option: '',
                    fans_status: '0',
                    fans_desc:{
                        type: '1',
                        name: '',
                        avatar: '',
                        qr: '',
                        appid: '',
                        path: '',
                    }
                }
                this.$nextTick(() => {
                    // this.$refs.ruleForm.resetFields();
                    this.$refs.ruleForm.clearValidate();
                })
            },
            edit(row){
                get('/addons/kzvote/vote/detail', {vote_id:row.id}).then(res => {
                    this.activeName='first'
                    this.form = res.data;
                    this.form.start_time = res.data.start_time_text;
                    this.form.end_time = res.data.end_time_text;
                    this.form.apply_start_time = res.data.apply_start_time_text;
                    this.form.apply_end_time = res.data.apply_end_time_text;
                    this.form.music_id = res.data.music_id.toString();

                    if (!this.form.fans_desc){
                        this.form.fans_desc = {
                            type: '1',
                            name: '',
                            avatar: '',
                            qr: '',
                            appid: '',
                            path: '',
                        };
                    }
                    this.dialog = true;
                })

            },
            setStatus(id,status){
                get('/addons/kzvote/vote/status', {vote_id:id,status:status}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
            upload(res,name){
                if (['image', 'poster'].indexOf(name) > -1){
                    this.$set(this.form, name, res.data.url)
                }else{
                    this.$set(this.form.fans_desc, name, res.data.url)
                }
            },
            qrcode(id){
                get('/addons/kzvote/vote/erCode', {vote_id:id}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
            html(text){
                this.form.desc = text
            },
            goto(url){
                // console.log(url1)
                location.href = url
            },
        }
    })
</script>
<style>
    .el-select  {
        min-width: 120px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
        width: 50%;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }
</style>